.vf-page-profile__detail {
  background: #fff;
  background: var(--mdc-theme-background, #fff);
}

.vf-page-profile__detail-header {
  padding-left: 24px;
  padding-bottom: 8px;
  position: relative;
}

.vf-page-profile__detail-actions {
  justify-content: flex-end;
  padding: 24px;
  padding-bottom: 12px;
}


.vf-page-profile__avatar {
  background: #fff;
  background: var(--mdc-theme-background, #fff);

  .mdc-card__media img {
    width: 100%;
    height: 100%;
    max-width: 512px;
    max-height: 512px;
  }
}

@media (max-width: 839px) {
  .vf-page-profile__avatar {
    display: none;
  }
}

.vf-page-profile__avatar-media {
  position:relative;
  display: block;
  padding: 0;

  >div {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(0, 0, 0, 0.1)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(0, 0, 0, 0.1)), color-stop(0.75, rgba(0, 0, 0, 0.1)), color-stop(0.75, transparent), to(transparent));
    background-size: 50px 50px;
    animation: dmc-page-profile__avatar-change-stripes 2s linear infinite;
  }
}

.vf-page-profile__avatar-media:before {
  content:     "";
  display:     block;
  padding-top: 100%;
}

.vf-page-profile__avatar-shadow {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: radial-gradient(transparent 70%, #3f51b5 70%);
  background: radial-gradient(transparent 70%, var(--mdc-theme-primary, #3f51b5) 70%);
}

.vf-page-profile__avatar-actions {
  justify-content: flex-end;
  padding: 24px;
  padding-bottom: 12px;
}

.vf-page-profile__avatar-change {
  overflow: hidden;
  text-overflow: ellipsis;

  input[type=file] {
    &::-webkit-file-upload-button {
      display: none;
    }

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}

.vf-page-profile__avatar-change--disabled:not(:disabled) {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(0, 0, 0, 0.1)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(0, 0, 0, 0.1)), color-stop(0.75, rgba(0, 0, 0, 0.1)), color-stop(0.75, transparent), to(transparent));
  background-size: 50px 50px;
  animation: dmc-page-profile__avatar-change-stripes 2s linear infinite;
  cursor: default;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.38);
  color: var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38));
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

@keyframes dmc-page-profile__avatar-change-stripes {
  from {
      background-position: 0 0;
  }
  to {
     background-position: -50px 0;
  }
}
